<template>
    <!-- <div class="piece-preview" :class="{'piece-preview-popper': effect == 'popper'}" :loading="loading" ref="warp"> -->
    <div class="piece-preview" :loading="loading" ref="warp">
        <ul>
            <li v-for="piece in pieceList" :key="piece.canvas_name">
                <span v-text="$getSurfaceNameFormat(piece.canvas_name)"></span>
                <figure>
                    <b v-for="img in piece.image" :key="img.url" :style="img.style">
                        <img :src="img.url" @load="onStatechange(img,$event)" @error="onStatechange(img,$event)">
                    </b>
                </figure>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "PiecesPreview",
    props: {
        pieces: { type: Array, default: () => [] },
        effect: { type: String, default: '' },
    },
    data () {
        return {
            pieceList: [],
            loading: false,
        };
    },
    watch: {
        pieces () {
            this.getPieceList()
        },
    },
    methods: {

        getPieceList () {

            const result = [];
            this.pieces.map(piece => {

                const layers = typeof piece.layers == 'string' ? JSON.parse(piece.layers) : piece.layers;

                if (piece.output_img && layers.length > 0) {

                    const isFax = piece.canvas_width > piece.canvas_height;

                    result.push({
                        canvas_name: piece.canvas_name,
                        image: [
                            // {
                            //     url: this.$getImageUrl(piece.mask_image),
                            //     style: null,
                            // },
                            {
                                url: this.$getLitimgUrl(piece.output_img),
                                style: {
                                    width: isFax ? '100%' : (100 * piece.canvas_width / piece.canvas_height) + '%',
                                    height: isFax ? (100 * piece.canvas_height / piece.canvas_width) + '%' : '100%',
                                }


                                // style: {
                                //     left: 100 * (piece.canvas_left / piece.outer_width) + '%',
                                //     top: 100 * (piece.canvas_top / piece.outer_height) + '%',
                                //     width: 100 * (piece.canvas_width / piece.outer_width) + '%',
                                //     height: 100 * (piece.canvas_height / piece.outer_height) + '%',
                                // }
                            }

                        ]
                    })
                }

            })

            this.pieceList = result;
            this.loading = this.pieceList.length > 0;
            this.$nextTick(() => this.onStatechange())
        },

        onStatechange (img, event) {
            if (this.$el) {
                const elems = this.$el.querySelectorAll('ul img');
                const images = Array.prototype.slice.call(elems);
                const unload = images.filter(img => !img.complete);
                this.loading = unload.length > 0;
            } else {
                this.loading = false;
            }
        }
    },
    created () {
        this.getPieceList();
    }
};
</script>
<style lang="scss" scoped>
.piece-preview {
    position: relative;
    box-sizing: border-box;
    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px;
        li {
            position: relative;
            border-radius: 8px;
            margin: 4px;
            width: 240px;

            figure {
                position: relative;
                box-sizing: border-box;
                border: 24px solid transparent;
                background: #f0f0f0;
                &::before {
                    content: '';
                    display: block;
                    padding-bottom: 100%;
                    height: 0;
                }

                b {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 100%;
                    height: 100%;
                    transform: translate(-50%, -50%);

                    &::before {
                        content: '';
                        position: absolute;
                        left: -12px;
                        top: -12px;
                        right: -12px;
                        bottom: -12px;
                        background: #fff;
                        border-radius: 8px;
                    }
                    img {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: #fff;
                        border: 1px dashed #bdbdbd;
                        box-sizing: border-box;
                    }
                }
            }

            span {
                display: block;
                text-align: center;
                height: 14px;
                font-size: 14px;
                font-weight: bold;
                color: #000000;
                line-height: 14px;
                padding: 0 0 8px;
            }
        }
    }

    &[loading] {
        background-image: url(@/assets/images/loading.gif);
        background-position: center;
        background-size: 32px 32px;
        background-repeat: no-repeat;
        ul {
            opacity: 0;
        }
    }
}

/*
.piece-preview-popper {
    border: none;
    padding-bottom: 0;
    background: none;
    height: auto;
    padding: 8px;

    ul {
        position: relative;
        width: auto;
        height: auto;

        li {
            height: auto;
            padding: 0;
            margin: 4px;
            width: 240px;
            display: flex;
            flex-direction: column;
            align-items: center;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding-bottom: 100%;
                background: #f0f0f0;
            }

            figure {
                margin: 12px 0;
                position: relative;
                width: 96px;
                height: 192px;
                box-sizing: content-box;
                background: #fff;
                border: 12px solid #fff;
                border-radius: 8px;
            }

            span {
                display: block;
                margin-top: 10px;
                position: relative;
            }
        }
    }
}

*/
</style>


